@import 'public.less';
html,body{
    height: 100%;
    color: #585858;
    position: relative;
}
.header{
    display: flex;
    justify-content: space-between;
    .pxToRem(height,200);
    align-items: center;
    border-bottom: 1px solid #ececec;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    box-sizing: border-box;
    span,figure{
        width: 20%;
    }
    figure{
        .pxToRem(height,200);
        .pxToRem(line-height,200);
        text-align: left;
        img{
            .pxToRem(width,80);
            margin-left: 25%;
        }
    }
    ul{
        flex: 1;
        display: flex;
        justify-content: space-between;
        li{
            flex: 1;
            .pxToRem(font-size,75);
            text-align:center;
            .pxToRem(line-height,200);
            a{
                display: inline-block;
                .pxToRem(height,200);
                color: #585858;
            }
            .active{
                color: #000;
                border-bottom: 1px solid #000;
                box-sizing: border-box;
            }
        }
    }
}

.xl-hd{
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:1px solid #ececec;
    position: fixed;
    .pxToRem(top,200);
    left:0;
    width: 100%;
    z-index: 400;
    figure,span{
        display: inline-block;
        .pxToRem(height,200);
        width: 40px;
        .pxToRem(line-height,200);
        text-align: center;
        img{
            width: 20%;
        }
    }
    div{
        flex: 1;
        display: flex;
        justify-content: center;
        a{
            color: #75dbab;
        }
    }
}
.main{
    height: 100%;
   .swiper-wrapper{
        .slide-xl{
            height: 100%;
            .pxToRem(padding-bottom,300);
            .pxToRem(padding-top,400);
            .xl-main{
                background: #fff;
                *zoom:1;
                p{
                    margin-top: 3%;
                    margin-left: 3%;
                    float: left;
                }
                img{
                    margin-top: 3%;
                    float: left;
                    margin-left: 2%;
                    width: 2%;
                    .pxToRem(width,30)
                }
                h2{
                    clear: both;
                    .pxToRem(font-size,200);
                    margin-left: 3%;
                    float: left;
                    margin-top: 3%;
                }
                figure{
                    width: 25%;
                    float: right;
                    margin-top: 5%;
                    margin-right: 5%;
                    img{
                        width: 100%;
                    }
                }
            }
            .xl-main::after{
                content: "";
                display: block;
                height: 0;
                clear: both;
            }
            .keep-cvs{
                background: #fff;
                .pxToRem(height,750);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .xl-pm{
                background: #fff;
                display: flex;
                height: 25px;
                align-items: center;
                padding: 3%;
                border-top: 1px solid #ccc;
                p{
                    .pxToRem(width,480);
                    .pxToRem(font-size,12)
                }
                .pm{
                    flex: 1;
                    height: 5px;
                    div{
                        width: 20%;
                        background: #21c687;
                        height: 5px;
                    }
                }
                figure{
                    .pxToRem(width,150);
                    img{
                        width:100%;
                    }
                }
            }
            .my_xl{
                background: #ebf0f2;
                padding-top: 5%;
                h2{
                    height: 44px;
                    line-height: 44px;
                    padding-left: 3%;
                    background: #fff;
                }
                figure{
                    // width: 100%;
                    position: relative;
                    img:nth-child(1){
                        width: 100%;
                    }
                    
                    img:nth-child(2){
                        width: 30%;
                        position: absolute;
                        .pxToRem(top,180);
                        left: 50%;
                        transform: translate(-50%);
                    }
                    p:nth-child(3){
                        bottom: 35%;
                    }
                    p:nth-child(4){
                        bottom:20%;
                    }
                    p:nth-child(3),p:nth-child(4){
                        color: #fff;
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%);
                        .pxToRem(font-size,40)
                    }
                }
                
            }
        }
        .slide-qx,.xl-pb{
            .pxToRem(padding-top,400);
            padding-bottom: 10%;
            position: relative;
            .all{
                position: absolute;
                .pxToRem(top,800);
                left: 50%;
                transform: translate(-50%);
                .pxToRem(width,1000);
                .pxToRem(height,1000);
                border: 1px solid #ccc;
                border-radius: 50%;
            }
            .pb-mag{
                position: absolute;
                .pxToRem(top,1100);
                left: 50%;
                transform: translate(-50%);
                text-align: center;
                background: #fff;
                .pxToRem(width,600);
                h2:nth-child(2){
                    .pxToRem(font-size,200);
                    .pxToRem(margin-top,100);
                }
                p:nth-child(3){
                    color: #66d3a5;
                    .pxToRem(margin-top,130);
                }
                p:nth-child(4){
                    .pxToRem(margin-top,70);
                    color: #b8b8b8;
                }
            }
            .start-run{
                position: absolute;
                .pxToRem(margin-top,1480);
                left: 50%;
                transform: translate(-50%);
                width: 100%;
                text-align: center;
            }
            .start-btn{
                position: absolute;
                .pxToRem(bottom,840);
                left: 0;
                width: 100%;
                background: #24c789;
                .pxToRem(height,300);
                .pxToRem(line-height,300);
                text-align: center;
                color: #fff;
            }
        }
    }
}





.footer{
    .pxToRem(height,300);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    border-top: 1px solid #ccc;
    a{
        display: block;
        height: 100%;
        width: 25%;
        float: left;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        img{
            .pxToRem(width,130)
        }
        p{
            margin-top: 5%;
        }
    }
}